import { Button, Image, View } from '@tarojs/components'
import FyComponent from '@/components/common/touch'
import './index.scss'

interface IProps {
  list?: Array<Object>
  storeInfo?: Object
  goodsInfo?: Object
}

const couponList = [
  { id: 1 },
  { id: 2 },
  { id: 3 },
  { id: 4 },
  { id: 5 },
  { id: 6 },
  { id: 7 },
  { id: 8 },
]

const getBarCodeArr = (str) => {
  const block = 4
  const num = Math.ceil(str.length / block)
  const arr:any = []
  for (let i=0; i<num; i++) {
    arr.push(str.substr(i * block, block))
  }
  return arr
}

export default class Index extends FyComponent<IProps, {}> {
  state: any

  static options = {
    addGlobalClass: true
  }

  constructor() {
    super()
    this.state = {
      number: 0
    }
  }

  //  左滑
  onTouchLeft(aaa, bbb, ccc) {
    console.log(aaa, bbb, ccc)
    console.log('onTouchLeft')
  }

  //  右滑
  onTouchRight(aaa, bbb, ccc) {
    console.log(aaa, bbb, ccc)
    console.log('onTouchRight')
  }

  render() {
    const prefixCls = 'order-voucher'
    return <View className={prefixCls}>
      {couponList.map(coupon => {
        return (<View key={coupon.id} className={`${prefixCls}-item`} onTouchStart={this.onTouchStart.bind(this)} onTouchMove={this.onTouchMove.bind(this, 'sdfsdfsd')} onTouchEnd={this.onTouchEnd.bind(this)}>
          <View className={`${prefixCls}-basis`}>
            <View className={`${prefixCls}-store`}>
              <View className={`${prefixCls}-store-img`}>
                <Image src={`https://fan-you-php.oss-cn-chengdu.aliyuncs.com/shop/img/202011037b8c61beceff623a4011a479324f2966.jpg`}/>
              </View>
              <View className={`${prefixCls}-store-name`}>巴四美蛙鱼火锅 炭火蛙锅</View>
              <View className={`${prefixCls}-store-goods`}>双11抢先购，限量100份，售完涨至98元 | ¥89抢门市价158元「上海松江开元名都大酒店」1大1小自助晚餐+儿童乐园，五星级酒店自助，海鲜烧烤+日式料理+小火锅+西式点心等100+精致美食，无限量畅吃畅饮，周末节假日通用！</View>
              <View className={`${prefixCls}-store-attr`}>菜品三选一</View>
            </View>
            <View className={`${prefixCls}-code`}>
              <View className={`${prefixCls}-qrCode ${prefixCls}-qrCode--end`}>
                <Image src={``}/>
              </View>
              <View className={`${prefixCls}-code-list bnn-number`}>
                {getBarCodeArr('40336908117497').map(code => {
                  return (<View key={code} className={`${prefixCls}-code-item`}>{code}</View>)
                })}
              </View>
            </View>
          </View>
          <View className={`${prefixCls}-line`}>
            <View className={`${prefixCls}-line-border`}/>
          </View>
          <View className={`${prefixCls}-verify`}>
            <View className={`${prefixCls}-verify-info`}>
              {/*<View className={`${prefixCls}-verify-status`}>核销状态：未核销</View>*/}
              {/*<View className={`${prefixCls}-verify-time`}>核销时间：--</View>*/}
              <View className={`${prefixCls}-verify-status`}>核销状态：已核销</View>
              <View className={`${prefixCls}-verify-time`}>核销时间：2019-12-12 12:12</View>
              <View className={`${prefixCls}-verify-type`}>核销人员：输码核销</View>
            </View>
            <Button className={`xf-btn xf-btn-round xf-btn-primary ${prefixCls}-verify-btn`}>自助核销</Button>
          </View>
        </View>)
      })}
    </View>
  }
}
